import _ from 'lodash';
import './style.css';
import Icon from './icon.svg';
import Data from './data.xml';
import printMe from './print.js';
import printMe from "./print";


if (process.env.NODE_ENV !== 'production') {
  console.log('Looks like we are in development mode!');
}


function component() {
  var element = document.createElement('div');
  var btn = document.createElement('button');

  // Lodash, now imported by this script
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  // Add the image to our existing div.
  //var myIcon = new Image();
  // myIcon.src = Icon;
  // element.appendChild(myIcon);

  // add read data.xml
  // console.log(Data);

  // printMe
  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = printMe;
  element.appendChild(btn);

  return element;
}

// document.body.appendChild(component());
let element = component(); // Store the element to re-render on print.js changes
document.body.appendChild(element);

if (module.hot) {
  module.hot.accept('./print.js', function () {
    console.log('Acception the updated printMe module!');
    // printMe();
    document.body.removeChild(element);
    element = component(); // Re-render the "component" to update the click handler
    document.body.appendChild(element);
  })
}
